<template>
  <!--  <el-dropdown v-if="LicenseInfo?.isLicence" trigger="click">-->
  <!--    <span v-if="LicenseInfo?.license" class="username">-->
  <!--      <el-tag type="success" v-if="LicenseInfo?.isLicence">-->
  <!--        {{ LicenseInfo?.license }}-->
  <!--      </el-tag>-->
  <!--      <el-tag type="danger" v-else> 未授权 </el-tag>-->
  <!--    </span>-->
  <!--    <template #dropdown>-->
  <!--      <el-dropdown-menu>-->
  <!--        <el-dropdown-item> 激活时间： {{ LicenseInfo.licenseTime }} </el-dropdown-item>-->
  <!--        <el-dropdown-item>-->
  <!--          <span style="width: 70px; text-align: right">授权时间：</span>{{ LicenseInfo.day }}天-->
  <!--        </el-dropdown-item>-->
  <!--        <el-dropdown-item> <span style="width: 70px; text-align: right">版本：</span>{{ LicenseInfo.version }}</el-dropdown-item>-->
  <!--      </el-dropdown-menu>-->
  <!--    </template>-->
  <!--  </el-dropdown>-->
  <!--  <span v-else> {{ LicenseInfo?.license }}</span>-->
  <el-dropdown trigger="click">
    <span class="username">{{ username }}</span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <UpdateFormPassword :isSelf="true">
            <el-icon>
              <Edit />
            </el-icon>
            {{ $t("header.changePassword") }}
          </UpdateFormPassword>

        </el-dropdown-item>
        <el-dropdown-item divided @click="logout">
          <el-icon>
            <SwitchButton />
          </el-icon>
          {{ $t("header.logout") }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <div class="logo-text">{{useUserStore().appTitle}}</div>
  <!-- infoDialog -->
  <InfoDialog ref="infoRef"></InfoDialog>
  <!-- passwordDialog -->
  <PasswordDialog ref="passwordRef"></PasswordDialog>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { LOGIN_URL, webConfig } from "@/config";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import UpdateFormPassword from "@/views/system/account/components/UpdateFormPassword/index.vue"
const userStore = useUserStore();
import { ElMessageBox, ElMessage } from "element-plus";
import InfoDialog from "./InfoDialog.vue";
import PasswordDialog from "./PasswordDialog.vue";
import { cfg_softcheck, licenseList } from "@/api/modules/system/params";
import { cfgAppstate } from "@/api/modules/home";

const username = computed(() => userStore.userInfo.name);
const router = useRouter();

// 退出登录
const logout = () => {
  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    // 2.清除 Token
    userStore.setToken("");
    localStorage.clear();
    sessionStorage.clear();
    // 3.重定向到登陆页
    router.replace(LOGIN_URL);
    ElMessage.success("退出登录成功！");
  });
};

// 打开修改密码和个人信息弹窗
const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
const openDialog = (ref: string) => {
  if (ref == "infoRef") infoRef.value?.openDialog();
  if (ref == "passwordRef") passwordRef.value?.openDialog();
};

const LicenseInfo = ref({
  license: "",
  version: "",
  isLicence: false,
  running: false
});

</script>

<style scoped lang="scss">
.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;

  img {
    width: 100%;
    height: 100%;
  }
}

.username {
  margin: 0 20px;
  font-size: 15px;
  color: var(--el-header-text-color);
  cursor: pointer;
}

.logo-text {
  font-size: 16px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}
</style>
